<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>OR Media Anesthesia Module</title>
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<style type="text/css">
		body,
		html {
			width: 100%;
			height: 100%;
			background-color: #555;
			position: absolute;
			margin: 0;
			padding: 0;
		}

		.content {
			box-sizing: border-box;
			min-width: 1200px;
			margin: 20px;
			padding: 0.5cm;
			color: white;
			background-color: #111;
		}

		tr td {
			border-bottom: #333;
		}

		.yellow {
			color: #ffD700;
		}

		table.tdpad td {
			padding: 10px;
		}

		table {
			color: white;
		}

		.formtitle {
			font-size: 20px;
			font-weight: bold
		}

		.underline {
			text-decoration: underline;
		}

		.textpad {
			padding-left: 10px;
			padding-right: 10px;
		}

		.w3-bold {
			font-weight: bold;
		}

		.verticaltext {
			writing-mode: vertical-rl;
			text-orientation: upright;
		}

		.redslot {
			border: solid red 2px;
			border-radius: 10px;
			background-color: rgba(255, 0, 0, 0.3);
			color: white;
			font-weight: bold;
			text-align: center;
			line-height: 20px;
			padding-top: 4px;
			padding-bottom: 4px;
		}

		table.tdborder td {
			border: 1px solid #666;
		}

		.w3-input {
			height: 22px;
		}
	</style>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.js"></script>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"
		integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.css">
	</link>
</head>

<body>
	<div class="content">
		<div class="w3-text-white" style="padding-top:10px; font-size:20px;padding-bottom:10px">Anesthesia Info Module
		</div>
		<table width="100%">
			<tr rel="data-fentayl">
				<td class="yellow">Fentanyl</td>
				<td>450</td>
				<td class="yellow">ug</td>
				<td><span style="padding-right:100px">100</span>100<span style="padding-left:30px">100</span><span
						style="padding-left:100px">100</span></td>
			</tr>
			<tr rel="data-fentayl">
				<td class="yellow">Rocuronium</td>
				<td>300</td>
				<td class="yellow">mg</td>
				<td>200</td>
			</tr>
			<tr rel="data-fentayl">
				<td class="yellow">Propoful</td>
				<td>100</td>
				<td class="yellow">mg</td>
				<td>
					<div id=""></div>
				</td>
			</tr>
			<tr rel="data-fentayl">
				<td class="yellow">Isofluorine</td>
				<td></td>
				<td class="yellow">%</td>
				<td>
					<div id=""></div>
				</td>
			</tr>
			<tr rel="data-fentayl">
				<td class="yellow">O<sub>2</sub></td>
				<td>1100.25</td>
				<td class="yellow">L</td>
				<td>
					<div id=""></div>
				</td>
			</tr>
			<tr rel="data-fentayl">
				<td class="yellow">Air</td>
				<td>540</td>
				<td class="yellow">L</td>
				<td>
					<div id=""></div>
				</td>
			</tr>
			<tr>
				<td colspan="2"></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="2">
					<div class="redslot larget">
						<div class="title">Arterial</div>
						<div class="data">130/67 102</div>
					</div>
					<div class="redslot">
						<div class="title">HR</div>
						<div class="data">63</div>
					</div>
					<div class="redslot">
						<div class="title">BP</div>
						<div class="data">81</div>
					</div>
					<div class="redslot">
						<div class="title">EtCO<sub>2</sub></div>
						<div class="data">30.8</div>
					</div>
					<div class="redslot">
						<div class="title">SpO<sub>2</sub></div>
						<div class="data">91.6</div>
					</div>
					<div class="redslot">
						<div class="title">RR</div>
						<div class="data">13</div>
					</div>
					<div class="redslot">
						<div class="title">FiO<sub>2</sub></div>
						<div class="data">81</div>
					</div>
					<div class="redslot">
						<div class="title">TV</div>
						<div class="data">540</div>
					</div>
					<div class="redslot">
						<div class="title">Tgen</div>
						<div class="data">96.8</div>
					</div>
				</td>
				<td colspan="2"><canvas id="sysChart"></canvas></td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		var timer;
		function stopData() {
			clearInterval(timer);
		}
		function resumeData() {
			stopData();
			timer = setInterval(readData, 5000);
		}
		var timestamp = ['2020-05-20 16:13:31', '2020-05-20 16:13:36', '2020-05-20 16:13:41', '2020-05-20 16:13:46', '2020-05-20 16:13:51', '2020-05-20 16:13:56', '2020-05-20 16:14:01', '2020-05-20 16:14:06', '2020-05-20 16:14:11', '2020-05-20 16:14:16', '2020-06-01 19:56:56', '2020-06-01 19:57:07', '2020-06-01 19:57:11', '2020-06-01 19:57:14', '2020-06-01 19:57:17', '2020-06-01 19:57:20', '2020-06-01 19:57:23', '2020-06-01 19:57:26', '2020-06-01 19:57:30', '2020-06-01 19:57:35'];
		var timestamplbls = ['16:13:31', '16:13:36', '16:13:41', '16:13:46', '16:13:51', '16:13:56', '16:14:01', '16:14:06', '16:14:11', '16:14:16', '19:56:56', '19:57:07', '19:57:11', '19:57:14', '19:57:17', '19:57:20', '19:57:23', '19:57:26', '19:57:30', '19:57:35'];
		Chart.defaults.global.legend.display = false;

		var sys = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 95, 102, 115, 114, 115, 99, 95, 102, 108, 106];
		var dia = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 79, 91, 92, 82, 64, 66, 69, 86, 67];
		var pulse = [24, 147, 124, 81, 166, 70, 111, 80, 111, 26];
		var sysChart = new Chart(document.getElementById('sysChart').getContext('2d'), {
			type: 'line',
			data: {
				labels: timestamplbls,
				datasets: [{
					label: 'NPB (Sys mmHg)',
					data: sys,
					borderWidth: 5,
					borderColor: 'rgba(50,150,150, 0.4)',
					fill: false,
					// yAxisID: 'NPB (Sys mmHg)',
					// This dataset appears on the first axis
					// yAxisID: 'first-y-axis',
				},
				{
					label: 'NPB (Dia mmHg)',
					data: dia,
					borderWidth: 5,
					borderColor: 'rgba(50,0,150, 0.4)',
					fill: false,
					// yAxisID: 'NPB (Dia mmHg)',
					// This dataset appears on the second axis
					// yAxisID: 'second-y-axis'
				},
				{
					label: 'Pulse',
					data: pulse,
					borderWidth: 5,
					borderColor: 'rgba(160,70,170, 0.4)',
					fill: false,
					yAxisID: 'Pulse',

				}
				],

			},

			options: {
				scales: {
					yAxes: [{
						ticks: {
							id: 'NPB (Sys mmHg)',
							// type: 'linear',
							suggestedMin: 60,
							suggestedMax: 180,
							scaleLabel: {
								display: true,
								labelString: '本月日期',
								color: '#FFFFFF',
							},
							// 	display: true,
							// labelString: '本月日期'
						}
					}, {
						id: 'NPB (Dia mmHg)',
						type: 'linear',
						position: 'left',
						scaleLabel: {
							display: true,
							labelString: 'NPB (Dia mmHg)',
							color: '#FFFFFF',
							fontSize: 16
						},

					}, {
						id: 'Pulse',
						type: 'linear',
						position: 'left',
						display: true,
						labelString: 'Pulse',
						scaleLabel: {
							display: true,
							labelString: 'Pulse',
							color: '#FFFFFF',
							fontSize: 16
						},
					}],
					xAxes: [{
						gridLines: {
							display: true,
							color: 'white',
							fontColor: 'yellow'
						},
						ticks: {
							beginAtZero: true,
							fontSize: 20,
							fontColor: 'yellow'
						},
						position: 'top',

					}]
				},
				aspectRatio: 6
			}
		});
		function addData(chart, label, data, status, idx) {
			if (label != "") {
				console.log(label.replace(/.* /, ""));
				timestamp.push(label);
				chart.data.labels.push(label.replace(/.* /, ""));

			}
			chart.data.datasets[idx].data.push(data);

			if (status != 0) {

			}
			chart.update();
		}
		function removeData(chart, label) {
			if (label != "") {
				timestamp.shift();
				chart.data.labels.shift();
			}
			chart.data.datasets.forEach((dataset) => {
				dataset.data.shift();
			});
		}
		function readData() {
			console.log(timestamp[timestamp.length-1]+' length: '+timestamp.length);
			jQuery.ajax({
				'url': 'https://thekonnect.com.hk/tko-drager/',
				'method': 'POST',
				'data': 'action=getData&timestamp=' + timestamp[timestamp.length - 1]
			}).done(function (d) {
				if (d != "") {
					var data = JSON.parse(d);
					for (var i = 0; i < data.length; i++) {
						var code = data[i].data;
						for (var j = 0; j < code.length; j++) {
							if (code[j].code == "5b") {
								addData(sysChart, data[i].timestamp, code[j].value, code[j].status, 0);
								//document.getElementById('sysValue').innerHTML =code[j].value;
							} else if (code[j].code == "5c") {
								addData(sysChart, "", code[j].value, code[j].status, 1);
								//document.getElementById('diaValue').innerHTML =code[j].value;
							} else if (code[j].code == "5d") {
								//addData(meanChart,"", code[j].value, code[j].status);
								//document.getElementById('meanValue').innerHTML =code[j].value;
							} else if (code[j].code == "64") {
								//addData(spo2Chart,"", code[j].value, code[j].status);
								//document.getElementById('spo2Value').innerHTML =code[j].value;
							} else if (code[j].code == "65") {
								addData(sysChart, "", code[j].value, code[j].status, 2);
								//document.getElementById('pulseValue').innerHTML =code[j].value;
							}
						}
						var max = timestamp.length;
						if (max > 20) {
							for (var k = 20; k < max; k++) {
								removeData(sysChart, "timestamp");
								/*
								removeData(diaChart,"");
								removeData(meanChart,"");
								removeData(spo2Chart,"");
								removeData(pulseChart,"");		*/
							}
							sysChart.update();
							/*
							diaChart.update();
							meanChart.update();
							spo2Chart.update();
							pulseChart.update();*/
						}
					}
				}
			});
		}
		timer = setInterval(readData, 5000);
	</script>
</body>

</html>